<template>
     <el-col :span="formspan" v-if="visible">
          <el-form-item :prop="prop" :label="label" :span="itemspan">
               <template v-if="$myProps.createScopeTemplate">
                         <span v-for="(template,index) in $myProps.createScopeTemplate(value)"
                              :key="index" :class="template.class||'listitem'">
                              <general v-if="template.hasOwnProperty('componentName')"
                                   v-bind="inheritProps(template)"
                                   :component-name="template.componentName"
                                   v-on="inheritListeners(template)"></general>
                         </span>
                    </template>
               <component v-else :is="$myProps.componentName" v-bind="$myProps" v-on="$myListeners"></component>
          </el-form-item>
     </el-col>
</template>

<script>
export default {
  components: {
    general: () =>
                import('@/components/general/index'),
    formCascader: () =>
                import('@/components/form/cascader'),
    formCheckbox: () =>
                import('@/components/form/checkbox'),
    formCheckboxGroup: () =>
                import('@/components/form/checkboxGroup'),
    formDatePicker: () =>
                import('@/components/form/datePicker'),
    formEditor: () =>
                import('@/components/form/editor'),
    formHidden: () =>
                import('@/components/form/hidden'),
    formInput: () =>
                import('@/components/form/input'),
    formInputNumber: () =>
                import('@/components/form/inputNumber'),
    formPassword: () =>
                import('@/components/form/password'),
    formRadio: () =>
                import('@/components/form/radio'),
    formSelect: () =>
                import('@/components/form/select'),
    formSteps: () =>
                import('@/components/form/steps'),
    formSwitch: () =>
                import('@/components/form/switch'),
    formTransfer: () =>
                import('@/components/form/transfer'),
    formTag: () =>
                import('@/components/form/tag'),
    formUpload: () =>
                import('@/components/form/upload')
  },
  model: {
    // 双向绑定
    prop: 'value',
    event: 'input'
  },
  props: {
    value: [String, Number, Object, Array, Boolean, Date],
    prop: String,
    label: String,
    visible: {
      type: Boolean,
      default: true
    },
    // 行列 24等分
    formspan: {
      type: Number,
      default: 10
    },
    // 24等分
    itemspan: {
      type: Number,
      default: 23
    }
  },
  data () {
    return {}
  },
  computed: {
    $myProps () {
      return this.$public.inheritProps(this)
    },
    $myListeners () {
      return this.$public.inheritListeners(this)
    }
  },
  created () {},
  methods: {

    // 继承转换属性
    inheritProps (template) {
      let cloneTemplate = {}
      Object.assign(cloneTemplate, template)

      let componentName = cloneTemplate.componentName

      switch (componentName.toKebabCase()) {
        case 'button-input':
          cloneTemplate.noText =
                            Object.prototype.toString.call(cloneTemplate.noText) ==
                            '[object Boolean]'
                              ? cloneTemplate.noText
                              : true
          delete cloneTemplate.visible
          break
      }

      delete cloneTemplate.componentName
      delete cloneTemplate.visible

      return cloneTemplate
    },
    // 继承转换事件
    inheritListeners (template) {
      let listeners = this.$public.inheritListeners({
        $attrs: template,
        $listeners: {}
      })

      Object.keys(listeners).forEach((event) => {
        let tempAction = listeners[event]

        let origin = []

        listeners[event] = function () {
          tempAction.apply(null, origin.concat(Array.from(arguments)))
        }
      })

      return listeners
    }
  },
  watch: {
    visible: {
      handler (newVal) {
        // console.log(newVal)
      }
    }
  }
}
</script>

<style>
    /* 防止变短 */

    /* .el-select {
        display: block !important;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 100%;
    }

    el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 100% !important;
    } */
    /* 滚动条显示  以及最大高度 */

    /* .el-scrollbar__wrap {
        overflow: auto;
        max-height: 240px;
    } */
    /* 下拉框地板间距样式 */

    /* .el-popper[x-placement^="bottom"] {
        padding-bottom: 5px;
    } */
</style>
